<template>
  <div id="box" :class="modalClass">
    <div id="content">
      <button class="closeWindow" @click="cancel">
        <svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
      </button>
      <p class="title">修改头像</p>
      <div class="imgArea">
        <label class="notImg hoverhand" for="inputId" v-if="!imgSrc">
          <img src="../common/imgs/addicon.png" alt="">
          <span>点击上传图片</span>
        </label>
        <label class="header hoverhand" for="inputId" v-if="imgSrc">
          <img :src="imgSrc" alt="">
          <span>修改头像</span>
        </label>
      </div>
      <p class="allow">支持JPEG/PNG</p>
      <p class="sub">
        <button @click="callback">提交</button>
      </p>
    </div>
    <upload-img curId="inputId" curRef="inputRef" @inputChange="fileChange"/>
  </div>
</template>
<script>
  import { file , changeUserInfo} from "../http/api";
  export default {
    name : 'uploadAvatar',
    data(){
      return{
        modalClass : 'modal-hide',
        imgSrc : null,
        file : null,
        httpImgUrl : null,
      }
    },
    components:{
      UploadImg : resolve => { require(['./UploadImage'], resolve) }, /*图片上传*/
    },
    props:{

    },
    methods:{
      callback() {
        /*点击确定*/
        if(!this.imgSrc){
          require('../common/js/toast').toast('请上传图片');
          return;
        }
        let param = {
          img : this.imgSrc,
          file : this.file
        };
        let thiz = this;
        changeUserInfo({avatar : this.httpImgUrl  }).then(res => {
          if(res.code == 200){
            require('../common/js/toast').toast('修改头像成功');
            thiz.$emit('confirm' , param ); /*组件调用方法： @confirm='function'*/
            thiz.hide();
          }
        });
      },
      cancel(){
        this.hide();
        this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
      },
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      dialogShow() {
        /*显示弹窗*/
        this.imgSrc = null;
        this.file = null;
        this.httpImgUrl = null;
        this.show();
      },
      fileChange(res){
        // console.log('res',res)
        // let ref = res.inputRef;
        let inputFile = res.inputFile;
        let base64Img = res.base64Img;
        let formData = new FormData();
        formData.append('img', inputFile);
        let thiz = this;
        file(formData).then( res => {
          if(res.code == 200){
            thiz.imgSrc = base64Img;
            thiz.httpImgUrl = res.data.files.url;
            thiz.file = inputFile;
          }
        });
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/animate.css";
  #box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
  }
  #content {
    left: 50%;top: 50%;padding: 35px 0;min-height: 228px;
    overflow:hidden;background: #fff;.borderRadius;position: absolute;padding-bottom: 60px;
    width: 430px;height: 403px;margin-left: -215px;margin-top: -201px;text-align: center;padding-top: 0;
    .closeWindow{
      padding: 11px;position: absolute;right: 0;top:0;background: none;
      img{width: 13px;height: 13px};color: rgba(0, 0, 0, 0.45);font-size: 18px;
      &:hover{
        color: rgba(0, 0, 0, 0.75);
      }
    }
    >.title{
      font-size: 20px;padding-top: 23px;color: #262626;
    }
    >.imgArea{
      width: 200px;height: auto;text-align: center;margin: 0 auto;
      >.notImg{
        border: 1px solid#DCDCDC;margin-top: 92px;height: 53px;line-height: 53px;display: block;
        >img{
          vertical-align: middle;
        }
        >span{
          vertical-align: middle;line-height: 53px;
        }
      }
      >.header{
        width: 160px;height: 160px;margin:0 auto;margin-top: 70px;display: block;position: relative;
        >img{
          width: 100%;height: 100%;
        }
        >span{
          display: none;width: 100%;height: 100%;text-align: center;line-height: 160px;font-size: 16px;color: #fff;position: absolute;z-index: 1;
          left: 0;top: 0;
        }
        &:hover>span{
          display: inline-block;
        }
      }
      >.hoverhand:hover{
        cursor: pointer;
      }
    }
    >.allow{
      font-size: 14px;color: #999;padding-top: 13px;
    }
    >.sub{
      padding-top: 41px;
      >button{
        .submit;width: 160px;height: 38px;font-size: 16px;line-height: 38px;
      }
    }
  }
</style>
